@using VotingSystem.ViewModels
@model VoteListViewModel

@{
    ViewData["Title"] = "我参与的投票";
}

<div class="container py-4">
    @if (TempData["SuccessMessage"] != null)
    {
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>@TempData["SuccessMessage"]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    }
    @if (TempData["ErrorMessage"] != null)
    {
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>@TempData["ErrorMessage"]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    }
    <div class="row mb-4">
        <div class="col">
            <h2 class="mb-3">我参与的投票</h2>
            <p class="text-muted">这里显示您参与过的所有投票。您可以通过分享链接参与更多投票。</p>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col">
            <div class="btn-group" role="group">
                <a asp-action="Index" asp-route-filter="all" 
                   class="btn btn-outline-primary @(ViewBag.CurrentFilter == "all" ? "active" : "")">
                    全部
                </a>
                <a asp-action="Index" asp-route-filter="active" 
                   class="btn btn-outline-primary @(ViewBag.CurrentFilter == "active" ? "active" : "")">
                    进行中
                </a>
                <a asp-action="Index" asp-route-filter="ended" 
                   class="btn btn-outline-primary @(ViewBag.CurrentFilter == "ended" ? "active" : "")">
                    已结束
                </a>
            </div>
        </div>
    </div>

    @if (!Model.Votes.Any())
    {
        <div class="row">
            <div class="col">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    您还没有参与过任何投票。您可以通过分享链接参与投票。
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="row">
            @foreach (var vote in Model.Votes)
            {
                <div class="col-12 mb-4 fade-in vote-item">
                    <div class="card vote-card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <h4 class="card-title mb-0">@vote.Title</h4>
                                        <span class="badge bg-@(vote.IsActive ? "success" : "secondary")">
                                            @(vote.IsActive ? "进行中" : "已结束")
                                        </span>
                                    </div>
                                    <p class="card-text text-muted mb-3">@vote.Description</p>
                                    <div class="d-flex gap-4 text-muted mb-3">
                                        <small><i class="fas fa-clock me-1"></i>创建时间：@vote.CreatedAt.ToString("yyyy-MM-dd HH:mm")</small>
                                        <small><i class="fas fa-users me-1"></i>参与人数：@vote.TotalVotes</small>
                                        <small><i class="fas fa-user-secret me-1"></i>@(vote.IsPublic ? "公开" : "私密")</small>
                                        <small><i class="fas fa-user me-1"></i>@(vote.IsAnonymous ? "匿名" : "实名")</small>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        <div class="progress-bar bg-primary" role="progressbar" 
                                             style="width: @(vote.TotalVotes > 0 ? (vote.TotalVotes * 100 / vote.MaxVotes) : 0)%">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 d-flex align-items-center justify-content-end">
                                    <a href="@Url.Action("Details", new { id = vote.Id })" class="btn btn-primary">
                                        <i class="fas fa-eye me-1"></i>查看详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>

@section Styles {
    <style>
        .vote-card {
            transition: transform 0.2s;
        }
        .vote-card:hover {
            transform: translateY(-2px);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
}

@section Scripts {
    <script>
        // 添加淡入动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.vote-card');
            cards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });

        $(document).ready(function() {
            // 搜索功能
            $('#searchButton').click(function() {
                var searchText = $('#searchInput').val().toLowerCase();
                $('.vote-item').each(function() {
                    var title = $(this).find('.card-title').text().toLowerCase();
                    var description = $(this).find('.card-text').text().toLowerCase();
                    var creator = $(this).find('.fa-user').parent().text().toLowerCase();
                    if (title.includes(searchText) || description.includes(searchText) || creator.includes(searchText)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });

            // 回车键触发搜索
            $('#searchInput').keypress(function(e) {
                if(e.which == 13) {
                    $('#searchButton').click();
                }
            });

            // 自动隐藏提示消息
            $('.alert').delay(4000).fadeOut(500);
        });
    </script>
} 